<template>
    <view class="view-wrap login">
        <uni-row>
            <uni-col :span="24">
                <image class="image-top" :src="imageList.cloud"></image>
            </uni-col>
        </uni-row>

        <view class="login-box">
            <view class="login__title">
                <text>收益平台</text>
            </view>

            <uni-forms ref="formRef" :model-value="form" :rules="rules">
                <uni-forms-item label="用户名" name="account">
                    <uni-easyinput v-model="form.account" type="text" placeholder="请输入用户名" />
                </uni-forms-item>
                <uni-forms-item label="密码" name="password">
                    <uni-easyinput v-model="form.password" type="password" placeholder="请输入密码" />
                </uni-forms-item>
                <!-- <uni-forms-item label="公司" name="companyId">
                    <x-data-select v-model="form.companyId" :localdata="companyList"></x-data-select>
                </uni-forms-item> -->
                <uni-forms-item v-if="ENV !== 'production'" label="URL">
                    <uni-easyinput
                        v-model="form.baseUrl"
                        type="text"
                        placeholder="BASE_URL"
                        :clearable="false"
                        @blur="handleBlur"
                    />
                </uni-forms-item>
            </uni-forms>
            <u-button type="primary" plain="true" @click="login">登录</u-button>
        </view>

        <div style="height: 200rpx"></div>
        <uni-row>
            <uni-col :span="8">
                <image class="image-bottom" :src="imageList.order"></image>
            </uni-col>
            <uni-col :span="8">
                <image class="image-bottom" :src="imageList.sale"></image>
            </uni-col>
            <uni-col :span="8">
                <image class="image-bottom" :src="imageList.analysis"></image>
            </uni-col>
        </uni-row>
    </view>
</template>

<script setup lang="ts">
import { ENV } from '@/constant';
import useLogin from '@/pages/login/useLogin';

const { formRef, form, rules, imageList, handleBlur, login } = useLogin();
</script>

<style lang="scss" scoped>
.login {
    height: 100vh;
    background-color: #ecf5ff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    &__title {
        text-align: center;
        color: #3c9cff;
        font-size: 32rpx;
        height: 100rpx;
        line-height: 100rpx;
        margin-bottom: 30rpx;
    }
}

.login-box {
    margin: 30rpx;
    padding: 30rpx;
    padding-top: 0;
    background-color: #fff;
}

.image-top {
    width: 200rpx;
    height: 200rpx;
}

.image-bottom {
    width: 100%;
    height: 200rpx;
}
</style>
